<template>
  <header class="bio-header">
    <div :class="isHomePage ? 'layout-reactive' : 'layout-reactive-full'">
      <router-link :to="{name: 'Home'}"><div class="bio-header-logo" /></router-link>
      <div class="bio-header-title">
        <h1>江苏生物多样性数据搜索平台</h1>
      </div>
      <div class="bio-header-menus">
        <div class="bio-header-btns">
          <span>联系我们</span>
          <router-link :to="{name: 'Login'}" class="btn-register">注册</router-link>
          <router-link :to="{name: 'Login'}" class="btn-login">登录</router-link>
        </div>
        <NavMenu />
      </div>
    </div>
  </header>
</template>

<script>
import NavMenu from './menu'
export default {
  name: "BioHeader",
  components: {
    NavMenu,
  },
  computed: {
    isHomePage(){
      return this.$route.path.includes('home')
    }
  }
};
</script>

<style lang="scss">
.bio-header{
  background-color: var(--primary-color);
  .layout-reactive-full{
    padding: 0 30px;
    width: 100% !important;
  }
  .layout-reactive, .layout-reactive-full {
    display: flex;
    align-items: center;

    .bio-header-logo{
      width: 170px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
      overflow: hidden;
      background-image: url(../../assets/images/logo.png);
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .bio-header-title{
      flex: 1;
      min-width: 0;
      h1{
        font-size: 24px;
        color: #fff;
      }
    }
    .bio-header-menus{
      text-align: right;
    }

    .bio-header-btns{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 8px 0;
      & > span {
        padding: 4px 12px;
        font-size: 14px;
        border-right: 1px solid #fff;
        color: #fff;
      }
      .btn-register, .btn-login{
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid #fff;
        color: #fff;
        margin-left: 12px;
        &:hover{
          color: var(--primary-color);
          background-color: #fff;
        }
      }
    }
  }
}
</style>